<template>
  <div class='sub' >
      <div class="subLeft" ref="sub">
     <van-sidebar v-model=" activeKey" >
  <van-sidebar-item v-for="(data,index) in datalist.food_spu_tags" :key="index" :title="data.name" :to="`/details/sub/${index}`"/>
</van-sidebar>
</div>
<div class="center" :style="{height:height+'px'}" :key="height">
    <router-view></router-view>
</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'subs',
  data () {
    return {
      activeKey: 0,

    }
  },
  created () {
    console.log('idd', this.$route)
  },
  computed: {
    ...mapState({
      datalist: state => state.deatilslist.datalist,
    }),
    height () {
      return document.documentElement.clientHeight - document.querySelector('header').offsetHeight
    },
  },
  updated () {
    console.log(this.height)
  },
}
</script>

<style lang='less' scoped>
.sub{
    display: flex;
      .center{
          flex: 1;
          overflow: auto;
          height: 1580px;
      }
}
</style>
